<!--
 * @Description: 默认布局组件
 * @Author: 陈三愿
 * @Date: 2025-09-14 22:45:00
 * @LastEditTime: 2025-09-14 23:30:00
-->
<script setup lang="ts">
import { ref } from 'vue';

// 控制左侧菜单栏的折叠状态
const isSidebarCollapsed = ref(false);

// 切换侧边栏折叠状态
const toggleSidebar = () => {
  isSidebarCollapsed.value = !isSidebarCollapsed.value;
};
</script>

<template>
  <div class="min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-base-100 shadow-md z-10">
      <div class="navbar container mx-auto px-4">
        <div class="flex-none">
          <button class="btn btn-square btn-ghost" @click="toggleSidebar">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
            </svg>
          </button>
        </div>
        <div class="flex-1">
          <a class="btn btn-ghost normal-case text-xl">Nuxt DaisyUI</a>
        </div>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <div class="flex flex-1">
      <!-- 左侧菜单栏 -->
      <aside 
        class="bg-base-100 shadow-xl fixed top-0 left-0 h-full pt-16 transition-all duration-300 z-0 overflow-y-auto" 
        :class="{ 'w-0 opacity-0': isSidebarCollapsed, 'w-64 opacity-100': !isSidebarCollapsed }"
      >
        <SidebarMenu />
      </aside>
      
      <div class="flex-1 flex flex-col transition-all duration-300 max-w-full overflow-x-auto" :class="{ 'ml-0': isSidebarCollapsed, 'ml-64': !isSidebarCollapsed }">
        <!-- 面包屑导航 -->
        <div class="bg-base-200">
          <div class="container px-4 py-2">
            <Breadcrumb />
          </div>
        </div>
        
        <!-- 主内容 -->
        <main class="flex-1 p-4">
          <slot />
        </main>
      </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-base-300 py-4">
      <div class="container mx-auto px-4 text-center">
        <p>© 2025 Nuxt DaisyUI - 陈三愿</p>
      </div>
    </footer>
  </div>
</template>

<style scoped>
/* 确保侧边栏在折叠时不可点击 */
aside.w-0 {
  pointer-events: none;
}
</style>